<template>
    <div class="hearder">
      <div class="hearder_input">
        <el-input v-model="input"  size="mini"  placeholder="搜索：目的地/酒店/景点/航班号">
          <i slot="prefix"  class="el-input__icon el-icon-search input_icon"></i>
        </el-input>
      </div>
      <div class="hearder_icon">
          <span class="iconfont">&#xe61d;</span>
          <p>我的</p>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Header",
        data() {
         return {
           input: ''
         }
        }
    }
</script>

<style scoped>
  .hearder{
    width: 375px;
    height: 224px;
    background-image: url(https://dimg04.c-ctrip.com/images/0zg0x12000814zg005452.jpg);
    background-size: 100% 100%;
    display: flex;
  }
  .hearder_input{
    width: 80%;
    margin-left: 5%;
    margin-top: 5px;
    color: #666;
  }
  .hearder_icon{
    margin-left: 3%;
    color: #ffffff;
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 20px;
    font-style: normal;
    margin-left: 5px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .input_icon{
    color: #409eff
  }

</style>
